<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: 王晓阳
  Date: 2024/4/7
  Time: 10:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="webjars/layui/2.6.8/layui.js"></script>
    <link rel="stylesheet" href="webjars/layui/2.6.8/css/layui.css" media="all">
</head>
<body>
    <div class="layui-container">
        <%--条件查询--%>
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">查询条件</h2>
                    <div class="layui-colla-content layui-show">
                        <div class="layui-form"  id="searchForm" lay-filter="searchForm">
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input type="text" name="id" placeholder="请输入编号" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline" style="left: 80px">
                                <div class="layui-input-inline">
                                    <input type="text" name="siteItem" placeholder="请输入巡检项目" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline" style="left: 100px">
                                <button class="layui-btn" onclick="search()" >查询</button>
                            </div>
                            <div class="layui-inline" style="left: 120px">
                                <button type="reset" onclick="chongzhi()" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <table id="plotTable" lay-filter="plotTables"  class="layui-table layui-table-hover"></table>

            <%--修改页面--%>
            <div id="update" style="display:none;padding:20px">
                <form class="layui-form" id="updateForm" lay-filter="updateForm">
                    <div class="layui-form-item" style="display:none;">
                        <label class="layui-form-label">编号:</label>
                        <div class="layui-input-block">
                            <input type="text" name="id" required class="layui-input" disabled="disabled">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">巡检项目:</label>
                        <div class="layui-input-block">
                            <input type="text" name="siteitem" required  class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">创建时间:</label>
                        <div class="layui-input-block">
                            <input type="text" name="createtime" id="createtime" style="display: none">
                            <input type="datetime-local" id="createtimes" step="1"  class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注:</label>
                        <div class="layui-input-block">
                            <input type="text" name="note"   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">小区:</label>
                        <div class="layui-input-block">
                            <select name="plotid" id="plotid">
                                <option value="">请选择小区</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <%--添加页面--%>
            <div id="add" style="display:none;padding:20px">
                <form class="layui-form" id="addForm" lay-filter="addForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">巡检项目:</label>
                        <div class="layui-input-block">
                            <input type="text" name="siteitem" onblur="sitename();" required  class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">创建时间:</label>
                        <div class="layui-input-block">
                            <input type="text" name="createtime" id="createtimeadd" style="display: none">
                            <input type="datetime-local" id="createtimeadds" step="1"  class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注:</label>
                        <div class="layui-input-block">
                            <input type="text" name="note"   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">小区:</label>
                        <div class="layui-input-block">
                            <select name="plotid">
                                <option value="">请选择小区</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
    </div>
    <script type="text/html" id="barDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
            <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="timu">题目</a>
        </div>
    </script>
    <%--头部工具栏，添加--%>
    <script type="text/html" id="headTool">
        <button class="layui-btn" onclick="add()">添加巡检项目</button>
    </script>
    <script>
        let $=layui.$
        //发送ajax请求去读角色数据
        $.get("/property/plot/show")
            .then(({data})=>{
                //data:数组
                $(data).each(function (i,e){
                    let option = $("<option value='"+e.id+"'>"+e.plotname+"</option>");
                    $("[name=plotid]").append(option);
                });
                //重新渲染下拉列表
                layui.form.render('select');
            });
        //渲染表格
        layui.use(function (){
            let table=layui.table;
            table.render({
                id:"one",
                elem:"#plotTable",
                page : true,
                limit : 5,
                limits : [5,10,15,20],
                method : "post",
                contentType : "application/json",
                url:"/Site/site/show",
                toolbar: "#headTool",
                cols:[[
                    {field:'number',align: 'center',type:'numbers',title:"编号"},
                    {field:'id',align: 'center',hide:true,title:"编号"},
                    {field:'siteitem',align: 'center',title:"巡检项目"},
                    {field:'createtime',align: 'center',title:"创建时间"},
                    {field:'note',align: 'center',title:"备注"},
                    {field:'plot',align: 'center',title:"小区",templet(d){
                        return d.plot == null ? "-" : d.plot.plotname;
                    }},
                    {fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]]
            })
            //监听行工具栏事件
            table.on("tool(plotTables)",function (obj){
                if(obj.event == "delete"){
                    deletes(obj.data.id);
                }else if(obj.event == "update"){
                    updates(obj);
                }else if(obj.event == "timu"){
                    window.location = "/Site/sitetopic/index?id="+obj.data.id;
                }
            })
        })

        //点击去查询
        function search(){
            //获取表单的值,表单序列化
            var where = layui.form.val('searchForm');
            console.log(where)
            //条件查询，重载表格因为键和值都是where，所以可以值保留键
            layui.table.reload('one',{where : where});
        }
        //点击重置
        function chongzhi(){
            $("[name=id]").val("");
            $("[name=siteItem]").val("");
            //获取表单的值,表单序列化
            var where = layui.form.val('searchForm');
            //条件查询，重载表格因为键和值都是where，所以可以值保留键
            layui.table.reload('one',{where : where});
        }

        //修改
        function updates(obj){

            //先赋值
            layui.form.val('updateForm', obj.data);
            $("#createtimes").val( $("#createtime").val())

            $("[name=plotid]").val(obj.data.plot.id)
            //渲染
            layui.form.render('select');

            console.log(obj.data)
            //弹窗
            layui.layer.open({
                type : 1,
                title : "修改用户",
                area:["500px","500px"],
                content: $("#update"),
                icon : 3,
                btn:["确定","取消"],
                yes(){
                    var replace = $("#createtimes").val().replace("T"," ");

                    $("#createtime").val(replace);

                    //通过表单序列化，获取输入的内容
                    var updateForm = layui.form.val("updateForm");

                    //发送ajax请求
                    $.post("/Site/site/update",updateForm)
                        .then(({msg})=>{
                            //关闭弹出层
                            layui.layer.close(layui.layer.index);
                            //弹出消息提示框
                            layui.layer.msg(msg);
                            //刷新表格
                            layui.table.reload('one');

                            $("#createtimes").val( $("#createtime").val())
                        });


                }
            });
        }

        //点击添加
        function add(){
            //清一下数据
            $("#addForm")[0].reset();

            layui.layer.open({
                type : 1,
                title : "提示",
                area:["500px","500px"],
                content: $("#add"),
                icon : 3,
                btn:["确定","取消"],
                yes(){
                    var replace = $("#createtimeadds").val().replace("T"," ");

                    $("#createtimeadd").val(replace);
                    //通过表单序列化，获取输入的内容
                    var addForm = layui.form.val("addForm");
                    //发送ajax请求
                    $.post("/Site/site/add",addForm)
                        .then(({msg})=>{
                            //关闭弹出层
                            layui.layer.close(layui.layer.index);
                            //弹出消息提示框
                            layui.layer.msg(msg);
                            //刷新表格
                            layui.table.reload('one');
                        });
                }
            });
        }

        //点击删除
        function deletes(id){
            layui.layer.open({
                type : 0,
                title : "提示",
                area:["260px","180px"],
                content:"  确定删除吗？",
                icon : 3,
                btn:["确定","取消"],
                yes(){
                    $.get("/Site/site/delete?id="+id)
                        .then(({msg})=>{
                            //关闭弹出层
                            layui.layer.close(layui.layer.index);
                            //弹出消息提示框
                            layui.layer.msg(msg);
                            //刷新表格
                            layui.table.reload('one');
                        })
                }
            });
        }
    </script>
</body>
</html>
